<extend name="Base/common_nojhd"/>
<block name="style">
    <link href="__CSS__/user.css" rel="stylesheet" type="text/css" />
    <style>
        #vld-tooltip {
            position: absolute;
            z-index: 1000;
            padding: 5px 10px;
            background: #F37B1D;
            min-width: 150px;
            color: #fff;
            transition: all 0.15s;
            box-shadow: 0 0 5px rgba(0,0,0,.15);
            display: none;
        }

        #vld-tooltip:before {
            position: absolute;
            top: -8px;
            left: 50%;
            width: 0;
            height: 0;
            margin-left: -8px;
            content: "";
            border-width: 0 8px 8px;
            border-color: transparent transparent #F37B1D;
            border-style: none inset solid;
        }
    </style>
</block>
<block name="TITLE"><title>世果365</title></block>
<block name="body">
    <form action="{:U('User/register')}" id="registerForm" class="am-form" method="post" >
        <div class="register_box">
            <div class="accimpro">注册新账号</div>
            <div class="reg_box am-form-group">
                <div class="phone fl">联系电话：</div>
                <input type="tel" name="username" id="username" class="am-form-field am-radius fl" style="width: 70%;height: 30px;" placeholder="输入你的手机号" value="{:I('username')}" required pattern="^[1][0-9]{10}$" data-foolish-msg="请输入正确的手机号"/>
            </div>
            <empty name="code">
                <div class="reg_box am-form-group">
                    <div class="phone fl">验证码：</div>
                    <input type="text" name="code" class="am-form-field am-radius fl" style="width: 30%;height: 30px;" placeholder="验证码" value="{:I('code')}" required/>
                    <button type="button" id="sendMessage" disabled="disabled" class="am-btn am-btn-danger" style="width: 40%;height: 30px;text-align: center;font-size: 1.4rem;padding: 0;">
                        获取验证码
                        <span id="limitTime" class="" ></span>
                    </button>
                </div>
                <else/>
                <div class="reg_box am-form-group am-hide">
                    <div class="phone fl">验证码：</div>
                    <input type="text" name="code" class="am-form-field am-radius fl" style="width: 30%;height: 30px;" placeholder="验证码" value="{:I('code')}" required/>
                </div>
            </empty>

            <div class="reg_box am-form-group">
                <div class="phone fl">密码：</div>
                <input type="password" name="password" class="am-form-field am-radius fl" id="doc-vld-pwd-1" style="width: 70%;height: 30px;" placeholder="输入你的密码" value="" minlength="6" required pattern="^[a-zA-Z0-9]{6,10}$" data-foolish-msg="6-10位数字或字母"/>
            </div>
            <div class="reg_box am-form-group">
                <div class="phone fl">密码确认：</div>
                <input type="password" class="am-form-field am-radius fl" data-equal-to="#doc-vld-pwd-1" style="width: 70%;height: 30px;" placeholder="再次输入你的密码" value="" required data-foolish-msg="两次密码不一致"/>
            </div>
            <div class="reg_box am-form-group">
                <div class="phone fl">用户姓名：</div>
                <input type="text" name="realName" class="am-form-field am-radius fl" style="width: 70%;height: 30px;" placeholder="输入你的姓名" value="" required/>
            </div>
            <div class="reg_box am-form-group">
                <div class="phone fl">省市：</div>
                <div class="fl" style="width: 32%;background-color: #fff;">
                    <select class="fl" name="province" data-am-selected="{btnWidth: '100%', btnStyle: 'default'}" required>
                        <option value="江苏" checked>江苏</option>
                    </select>
                </div>
                <div class="fr " style="width: 32%;background-color: #fff;margin-right: 2%;">
                    <select class="fl" name="city" data-am-selected="{btnWidth: '100%', btnStyle: 'default'}" required>
                        <option value="扬州" checked>扬州</option>
                        <option value="镇江">镇江</option>
                        <option value="泰州">泰州</option>
                    </select>
                </div>
                <!--<input type="text"  class="am-form-field am-radius fl" style="width: 72%;height: 30px;" placeholder="江苏/扬州" />-->
            </div>
            <div class="reg_box am-form-group" style="margin-top: 14px;">
                <div class="phone fl">公司名称：</div>
                <input type="text" name="shopName" class="am-form-field am-radius fl" style="width: 70%;height: 30px;" placeholder="输入你的公司名称" value="" required/>
            </div>
            <div class="reg_box am-form-group">
                <div class="phone fl">公司地址：</div>
                <input type="text" name="street" class="am-form-field am-radius fl" style="width: 70%;height: 30px;" placeholder="输入你的公司地址" value="" required/>
            </div>
            <div class="btnbox clearFix">
                <button type="button" class="am-btn am-btn-danger fl" style="margin-left: 10%;width: 35%;">取消</button>
                <button type="submit" id="submit" class="am-btn am-btn-success fr" style="margin-right: 10%;width: 35%;">注册</button>
            </div>
            <div class="foot">全国领先的网上水果批发平台</div>
        </div>
    </form>
    <script>
        $(function(){
            messageLimit=function(){
                var lastTime=$("#validTime").val();
                var nowTime=new Date().getTime();
                var periodTime=nowTime-lastTime;
                if(periodTime<60*1000){
                    $("#sendMessage").attr('disabled','disabled');
                    $("#limitTime").html("("+(60-parseInt(periodTime/1000))+"s)")
                }else{
                    $("#sendMessage").removeAttr('disabled');
                    $("#limitTime").html('');
                }
            }
            setInterval(messageLimit,500);
            $("#sendMessage").click(function(){
                var phone=$('#username').val();
                var url ='{:U('User/validate')}';
                var data={phone:phone};
                $.ajax({
                    url:url,
                    type:'POST',
                    async:false,
                    data:data,
                    success:function(respond){
                        if(respond.status==0){
                            $("#validTime").val(new Date().getTime());
                            alert("短信已发送，验证码有效期10分钟");

                        }else{
                            alert("短信发送失败,请确认手机号无误");
                        };
                    }
                })
            });
            var $form = $('#registerForm');
            var $tooltip = $('<div id="vld-tooltip">提示信息！</div>');
            $tooltip.appendTo(document.body);

            $form.validator();

            var validator = $form.data('amui.validator');

            $form.on('focusin focusout', '.am-form-error input', function(e) {
                if (e.type === 'focusin') {
                    var $this = $(this);
                    var offset = $this.offset();
                    var msg = $this.data('foolishMsg') || validator.getValidationMessage($this.data('validity'));

                    $tooltip.text(msg).show().css({
                        left: offset.left + 10,
                        top: offset.top + $(this).outerHeight()-30
                    });
                } else {
                    $tooltip.hide();
                }
                setTimeout(function(){
                    $tooltip.hide();
                },1500);
            });
        });
        window.onload = function () {
            document.body.style.backgroundColor = "#3EACFF";
        }
    </script>
</block>